<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="../../jQuery-JS/jquery-3.6.0.js"></script>
    <script type="text/javascript">
        /*
        需求：
        1.ul标签的第2个span子标签
        2.ul标签的第2个span后代标签
        3.ul标签的父标签
        4.id为cc的li标签的前面的所有li标签
        5.id为cc的li标签的所有兄弟li标签
        */
       $(function(){
           //1.ul标签的第2个span子标签
           //写法一
           //var $ul_sonspan=$("ul").children("span").eq(1);
           //写法二
           var $ul_sonspan=$("ul").children("span:eq(1)");
           $ul_sonspan.css("background-color","red");

           //2.ul标签的第2个span后代标签
           //写法一
           //var $ul_findspan=$("ul").find("span").eq(1);
           //写法二
           var $ul_findspan=$("ul").find("span:eq(1)");
           $ul_findspan.css("font-size","50px");

           //3.ul标签的父标签
           var $ul_parent=$("ul").parent();
           $ul_parent.css("color","blue");

           //4.id为cc的li标签的前面的所有li标签
           var $li_id_cc_beforeli=$("li#cc").prevAll("li");
           //console.log($li_id_cc_beforeli);
           $li_id_cc_beforeli.css("text-decoration","underline");

           //5.id为cc的li标签的所有兄弟li标签
           var $li_id_cc_allbroli=$("li#cc").siblings("li");
           $li_id_cc_allbroli.css("margin-left","100px")
       })
    </script>
</head>
<body>
    <div id="div1" class="box" title="one">class为box的div1</div>
    <div id="div2" class="box">class为box的div2</div>
    <div id="div3">div3</div>
    <span class="box">class为box的span</span>
    <br>
    <div>
        <ul>
            <span>span文本1</span>
            <li>AAAAA</li>
            <li title="hello" class="box2">BBBBB</li>
            <li class="box" id="cc">CCCCC</li>
            <li title="hello">DDDDD</li>
            <li title="two"><span>span文本2</span></li>
            <span><span>文本3</span></span>
        </ul>
        <span>span文本444</span>
        <br>
        <li>eeeee</li>
        <li>EEEEE</li>
        <br>
    </div>
    <!--
        在已经匹配出的元素集合中根据选择器查找孩子/父母/兄弟标签
        1.children():子标签中找
        2.find():后代标签中找
        3.parent():父标签
        4.prevAll():前面所有的兄弟标签
        5.nextAll():后面所有的兄弟标签
        6.siblings():前后所有的兄弟标签
    -->
</body>
</html>